import React, { useState } from 'react';
import axiosInstance from '../axiosInstance';
import dayjs from 'dayjs';
import { Card, DatePicker, Button, Popup, Toast, Steps } from 'antd-mobile';

// 样式对象集中定义
const styles = {
  container: {
    padding: '12px',
    display: 'flex',
    flexDirection: 'column',
    gap: '16px',
    width: '100%',
    boxSizing: 'border-box',
    overflowX: 'hidden'
  },
  card: {
    background: '#fff',
    padding: '16px',
    borderRadius: '8px',
    boxShadow: '0 1px 2px rgba(0,0,0,0.1)'
  },
  title: {
    margin: '0 0 16px',
    fontSize: '16px',
    color: '#333'
  },
  row: {
    display: 'flex',
    gap: '12px',
    alignItems: 'center'
  },
  dateBtn: {
    flex: 1,
    fontSize: '15px',
    padding: '8px'
  },
  queryBtn: {
    fontSize: '14px',
    padding: '4px 12px',
    minWidth: '60px'
  },
  steps: {
    '--title-font-size': '14px',
    '--description-font-size': '15px',
    '--indicator-margin-right': '12px',
    '--description-padding-left': '38px'
  },
  stepDesc: {
    lineHeight: 1.6,
    color: '#333',
    margin: '8px 0'
  }
};

function SearchPage() {
    const [date, setDate] = useState(new Date());
    const [visible, setVisible] = useState(false);
    const [entries, setEntries] = useState([]);
    const [loading, setLoading] = useState(false);

    const fetchEntries = async (selectedDate) => {
        setLoading(true);
        try {
            const res = await axiosInstance.get('/journals');
            const dayStr = dayjs(selectedDate).format('YYYY-MM-DD');
            const filtered = res.data.filter(
                entry => entry.created_at && entry.created_at.slice(0, 10) === dayStr
            );
            setEntries(filtered);
            if (filtered.length === 0) {
                Toast.show({ content: '该日期没有日记', position: 'bottom' });
            }
        } catch (e) {
            Toast.show({ content: '查询失败', position: 'bottom' });
        }
        setLoading(false);
    };

    return (
        <div style={styles.container}>
            <div style={styles.card}>
                <h4 style={styles.title}>日记查询</h4>
                <div style={styles.row}>
                    <Button
                        style={styles.dateBtn}
                        onClick={() => setVisible(true)}
                    >
                        {dayjs(date).format('YYYY-MM-DD')}
                    </Button>
                    <Button
                        color="primary"
                        size="mini"
                        onClick={() => fetchEntries(date)}
                        loading={loading}
                        style={styles.queryBtn}
                    >
                        查询
                    </Button>
                </div>
            </div>

            <DatePicker
                title="选择日期"
                visible={visible}
                value={date}
                onConfirm={val => {
                    setDate(val);
                    setVisible(false);
                }}
                onCancel={() => setVisible(false)}
                max={new Date()}
            />

            {entries.length > 0 && (
                <div style={styles.card}>
                    <Steps
                        direction="vertical"
                        current={-1}
                        style={styles.steps}
                    >
                        {entries.map((entry) => (
                            <Steps.Step
                                key={entry.id}
                                title={dayjs(entry.created_at).format('HH:mm:ss')}
                                description={
                                    <div style={styles.stepDesc}>
                                        {entry.summary}
                                    </div>
                                }
                            />
                        ))}
                    </Steps>
                </div>
            )}
        </div>
    );
}

export default SearchPage;